<template>
  <el-row>
    <basic-container>
      <div class="block">
        <el-row>
          <span class="demonstration">日期范围:  </span>
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="dateTimerRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator=" 至 "
            start-placeholder="开始日期 "
            end-placeholder=" 结束日期"
            align="right">
          </el-date-picker>
          <el-button type="primary" @click.native="searchDataRange">查询</el-button>
        </el-row>
      </div>
      <div>
        <el-card>
          <div id="myChartOnlineLine"  ref="myChart" style="height: 500px;"></div>
        </el-card>
      </div>
    </basic-container>
  </el-row>
</template>

<script>
  import {getList,getAcquisitionAllOnLine} from "@/api/stress/history";
  import {dateFormat} from "@/util/date";

  export default {
    data() {
      // var dataline= this.splitData([["2021-06-01T00:00:09", "-39.552", "-", "-", "-", "-", "-"],
      //   ["2021-06-01T00:01:05", "-", "-", "-12.789", "-", "-", "-"],
      //   ["2021-06-01T00:02:05", "-", "-", "-", "-", "-24.302", "-"],
      //   ["2021-06-01T00:03:05", "-", "-10.166", "-", "-", "-", "-"],
      //   ["2021-06-01T00:04:07", "-", "-", "-", "-30.961", "-", "-"],
      //   ["2021-06-01T00:05:05", "-", "-", "-", "-", "-", "-9.485"],
      //   ["2021-06-01T00:06:05", "-39.213", "-", "-", "-", "-", "-"],
      //   ["2021-06-01T00:07:05", "-", "-", "-12.894", "-", "-", "-"],
      //   ["2021-06-01T00:08:04", "-", "-", "-", "-", "-12.685", "-"],
      //   ["2021-06-01T00:09:05", "-", "-10.63", "-", "-", "-", "-"],
      //   ["2021-06-01T00:10:05", "-", "-", "-", "-30.652", "-", "-"]])
      return {
        //图表设置
        upColor:'#ec0000',
        upBorderColor: '#8A0000',
        downColor: '#00da3c',
        downBorderColor: '#008F28',
        lineOption:{
          legend: {
            data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30','MA40'],
            inactiveColor: '#777',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false,
              type: 'cross',
              lineStyle: {
                color: '#376df4',
                width: 2,
                opacity: 1
              }
            }
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: { onZero: false,lineStyle: { color: '#8392A5' } },
            scale: true,
            boundaryGap: false,
            splitLine: {show: false},
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
          },
          yAxis: {
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' } },
            splitLine: { show: false }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
          },
          dataZoom: [{
            textStyle: {
              color: '#8392A5'
            },
            dataBackground: {
              areaStyle: {
                color: '#8392A5'
              },
              lineStyle: {
                opacity: 0.8,
                color: '#8392A5'
              }
            },
            brushSelect: true
          }, {
            type: 'inside'
          }],
          series: [
            {
              type: 'candlestick',
              name: '日K',
              data: [],
              itemStyle: {
                color: '#FD1050',
                color0: '#0CF49B',
                borderColor: '#FD1050',
                borderColor0: '#0CF49B'
              }
            },
            {
              name: 'MA5',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1
              }
            },
            {
              name: 'MA10',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1
              }
            },
            {
              name: 'MA20',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1
              }
            },
            {
              name: 'MA30',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1
              }
            },
            {
              name: 'MA40',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1
              }
            }
          ]
        },
        //查询
        deviceId: '',
        sampleType: 4,
        //时间查询
        dateTimerRange:[],
        pickerOptions: {
          shortcuts: [{
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近二天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近三天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataline:[]
      };
    },
    watch:{
      //观察option的变化
      lineOption: {
        handler(newVal, oldVal) {
          if (this.myChart) {
            if (newVal) {
              this.myChart.setOption(newVal);
            } else {
              this.myChart.setOption(oldVal);
            }
          } else {
            this.drawHistoryLine();
          }
        },
        deep: true //对象内部属性的监听，关键。
      }
    },
    created() {
      this.dateCreated();
      this.initData();
    },
    computed: {
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
    },
    mounted() {
      this.drawHistoryLine();
      //this.initData();
    },
    methods: {
      dateCreated() {
        //当前设定的日期时间
        this.dateTimerRange.push(dateFormat(new Date()))
        //前一天设定的日期时间
        let d = new Date
        d.setTime(d.getTime()-24*60*60*1000);
        this.dateTimerRange.unshift(dateFormat(d))
      },
      initData() {
        this.deviceId = this.$route.params.id;
        this.handlePositionDetail();
      },
      drawHistoryLine(){
        if (document.getElementById('myChartOnlineLine') == null) {
          return
        }
        this.$echarts.dispose(document.getElementById('myChartOnlineLine'))
        let myChartOnlineLine = this.$echarts.init(document.getElementById('myChartOnlineLine'))// 基于准备好的dom，初始化echarts实例
        myChartOnlineLine.setOption(this.lineOption,true);// 绘制图表
      },
      drawLineInit(){
          this.$nextTick(() => {
            this.drawHistoryLine()
        })
      },
      handlePositionDetail(){
        let params = {}
        if (this.dateTimerRange) {
          params = {
            startTime_datege: this.dateTimerRange[0],
            startTime_datelt: this.dateTimerRange[1],
            deviceId: this.deviceId,
            sampleType: this.sampleType
          };
        }else {
          params = {
            deviceId: this.deviceId,
            sampleType: this.sampleType
          };
        }
        //曲线
        this.handleAcquisitionOnLine(params);

      },
      async handleAcquisitionOnLine(params = {}){
        // await getAcquisitionAllOnLine(params).then(res => {
        //   console.info(res.data.data)
        //   this.splitData(res.data.data)
        //
        // })
        let data = [["2021-06-01T00:00:09", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:01:05", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:02:05", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:03:05", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:04:07", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:05:05", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:06:05", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:07:05", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:08:04", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:09:05", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"],
          ["2021-06-01T00:10:05", "-39.552", "-39.213", "-12.789", "-12.894", "-12.685", "-9.485"]]
        this.splitData(data)
      },
      splitData(rawData) {
        let categoryData = [];
        let values0 = []
        let values1 = []
        let values2 = []
        let values3 = []
        let values4 = []
        let values5 = []
        for (let i = 0; i < rawData.length; i++) {
          categoryData.push(rawData[i].splice(0, 1)[0]);
          const value = rawData[i]
          values0.push(value[0]);
          values1.push(value[1]);
          values2.push(value[2]);
          values3.push(value[3]);
          values4.push(value[4]);
          values5.push(value[5]);

        }
        this.lineOption.xAxis.data = categoryData
        this.lineOption.series[0].data = values0
        this.lineOption.series[1].data = values1
        this.lineOption.series[2].data = values2
        this.lineOption.series[3].data = values3
        this.lineOption.series[4].data = values4
        this.lineOption.series[5].data = values5

      },

      searchData(values){
        //曲线
        this.handleAcquisitionOnLine(values);

      },
      searchDataRange(){
        let values = {};
        if (this.dateTimerRange) {
          values = {
            startTime_datege: this.dateTimerRange[0],
            startTime_datelt: this.dateTimerRange[1],
            deviceId: this.deviceId,
            sampleType: this.sampleType
          };
        }else {
          values = {
            deviceId: this.deviceId,
            sampleType: this.sampleType
          };
        }

        this.searchData(values)
      }
    }
  };
</script>

<style>
  .box {
    height: 800px;
  }

  .el-scrollbar {
    height: 100%;
  }

  .box .el-scrollbar__wrap {
    overflow: scroll;
  }
</style>
